<template>
  <div class="goods_detail">
    <el-popover
        placement="right"
        width="180"
          v-model="visible"
        trigger="hover" style="cursor:pointer;">
        <img slot="reference" src="../../assets/images/plus.png" style=" width: 30px;">
        <div class="display-flex-column">
          <div class="display-flex display-flex-justify-space-around h-80">
            <div @click="selectType(1)" class="display-flex-column display-flex-justify-center display-flex-align-center cursor-pointer">
              <img src="../../assets/images/jihe.png" class="mb-5 w-30" >
              <span>集合</span>
            </div>
            <div @click="selectType(2)"  class="display-flex-column display-flex-justify-center display-flex-align-center cursor-pointer">
              <img src="../../assets/images/jieshu.png"  class="mb-5 w-30" >
              <span>结束行程</span>
            </div>
          </div>
          <div class="display-flex display-flex-justify-space-around h-80">
            <div @click="selectType(3)" class="display-flex-column display-flex-justify-center display-flex-align-center cursor-pointer">
              <img src="../../assets/images/canying.png" class="mb-5 w-30" >
              <span>餐饮</span>
            </div>
            <div @click="selectType(4)"  class="display-flex-column display-flex-justify-center display-flex-align-center cursor-pointer">
              <img src="../../assets/images/jiudian.png"  class="mb-5 w-30" >
              <span>酒店</span>
            </div>
          </div>
          <div class="display-flex display-flex-justify-space-around h-80">
            <div  @click="selectType(5)"  class="display-flex-column display-flex-justify-center display-flex-align-center cursor-pointer">
              <img src="../../assets/images/hb.png" class="mb-5 w-30" >
              <span>航班</span>
            </div>
            <div  @click="selectType(6)"  class="display-flex-column display-flex-justify-center display-flex-align-center cursor-pointer">
              <img src="../../assets/images/jd.png"  class="mb-5 w-30" >
              <span>景点</span>
            </div>
          </div>
          <div class="display-flex display-flex-justify-space-around h-80">
            <div  @click="selectType(7)"  class="display-flex-column display-flex-justify-center display-flex-align-center cursor-pointer">
              <img src="../../assets/images/gw.png" class="mb-5 w-30" >
              <span>自费</span>
            </div>
            <div  @click="selectType(8)"  class="display-flex-column display-flex-justify-center display-flex-align-center cursor-pointer">
              <img src="../../assets/images/zyhd.png"  class="mb-5 w-30" >
              <span>自由活动</span>
            </div>
          </div>
          <div  class="display-flex display-flex-justify-space-around h-80">
            <div  @click="selectType(9)"  class="display-flex-column display-flex-justify-center display-flex-align-center cursor-pointer">
              <img src="../../assets/images/jt.png" class="mb-5 w-30" >
              <span>交通</span>
            </div>
            <div  @click="selectType(10)"  class="display-flex-column display-flex-justify-center display-flex-align-center cursor-pointer ">
              <img src="../../assets/images/qt.png"  class="mb-5 w-30" >
              <span>其他</span>
            </div>
          </div>
        </div>
      </el-popover>
  </div>
</template>
<script>
// 类型 1.集合 2.结束行程 3.餐饮 4.酒店5.航班6.景点7.自费8.自由活动9.交通10.其他
export default {
  name: 'routeBox',
  props: {
    day: {
      type: String | Number,
      default: ''
    },
  },
  data() {
    return {
      visible: false,
    }
  },
  mounted() {

  },
  methods: {
    selectType(type) {
      this.$emit('selectType', {type:type, day: this.day});
      this.visible = false;
    }
  }
}
</script>

<style scoped lang="scss">

</style>
